<template>
	<el-col :span="componentModel.col"
		style="width: 100%;height:200px;;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);position: relative;"
		@click.stop="onClickHandler" :class="[selected ?'col-selected-state' : 'col-normal-state']">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<i class="el-icon-s-grid" style="position: absolute;right: 0px;top:0px;z-index: 100;" @click="onIconClickHandler"></i>
		<div :id="componentModel.id+'_design'" style="width: 100%;height:200px;">
		</div>
		<ChartConfigDialog ref="chartConfigDialog"></ChartConfigDialog>
	</el-col>
</template>

<script>
	import utils from '@/utils/utils.js';
	import * as echarts from 'echarts';
	import ChartConfigDialog from './ChartConfigDialog.vue';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignHBarChartComponent",
		components:{ChartConfigDialog},
		props: [
			"componentModel"
		],
		beforeMount() {
			if (this.componentModel.col == undefined) {
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"col",6);
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			this.myChart = echarts.init(document.getElementById(this.componentModel.id + "_design"));
			this.option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					left: "right"
				},
				title: {
					text: this.componentModel.title,
					left: "center",
					subtext: this.componentModel.subtitle
				},
				yAxis: [{
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', ],
					axisTick: {
						alignWithLabel: true
					}
				}],
				xAxis: [{
					type: 'value'
				}],
				series: [{
					type: 'bar',
					name: "消费",
					data: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356]
				}, {
					type: 'bar',
					name: "降水",
					data: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356]
				}],
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
			};
			this.myChart.setOption(this.option);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		data() {
			return {
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label",
					},
					{
						"key": "dataSource",
						"label": "数据源",
						"editor": "select"
					}, {
						"key": "title",
						"label": "标题",
						"editor": "text",
					}, {
						"key": "subtitle",
						"label": "子标题",
						"editor": "text",
					}, {
						"key": "cssStyleExpression",
						"label": "cssStyle",
						"editor": "textarea",
					},
					{
						"key": "col",
						"label": "列数",
						"editor": "text"
					}, {
						"key": "bigScreen",
						"label": "大屏",
						"editor": "checkbox",
					}
				],
				selected: false,
				myChart: null,
				option: null,
			}
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.componentClickHandler(this);
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}else if(propertyKey=="col"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"col");
				}else if (propertyKey == "title") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"title");
				}else if (propertyKey == "subtitle") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"subtitle");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if (propertyKey == "col") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"col",parseInt(propertyValue));
				} else if (propertyKey == "title") {
					this.option["title"]["text"] = propertyValue;
					this.myChart.clear();
					this.myChart.setOption(this.option);
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"title",propertyValue);
				} else if (propertyKey == "subtitle") {
					this.option["title"]["subtext"] = propertyValue;
					this.myChart.clear();
					this.myChart.setOption(this.option);
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"subtitle",propertyValue);
				}
			},
			setSelected(selected) {
				this.selected = selected;
			},onIconClickHandler() {
				var dataSource = this.getPropertyValue("dataSource");
				if (dataSource == undefined || dataSource == "") {
					this.$alert("请选择数据源", "提示");
					return;
				}
				this.$refs.chartConfigDialog.setVisible(true);
				var dataSourceList = this.$store.state.formDesigner.$refs.dataSourceConfig.datasourceList;
				var tableName;
				for (var i = 0; i < dataSourceList.length; i++) {
					if (dataSourceList[i].id == dataSource) {
						tableName = dataSourceList[i].tableName;
						break;
					}
				}
				this.$refs.chartConfigDialog.init(tableName,this.componentModel);
			}
		},
	}
</script>

<style>
</style>
